<template>
  <div class="index-container">
    <!-- <div class="list-container">
      <div class="list">
        <div class="left-setsion">
          <div class="item" v-for="item in leftList" :key="item.id"></div>
        </div>
        <div class="right-setsion">
          <div class="item" v-for="item in rightList" :key="item.id"></div>
        </div>
      </div>
    </div> -->
    <div class="list-container-test">
      <!-- <div class="list"> -->
      <div class="setsion setsion1">
        <div class="item" v-for="item in leftList" :key="item.id"></div>
      </div>
      <div class="setsion setsion2">
        <div class="item" v-for="item in rightList" :key="item.id"></div>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref, computed } from "vue";

let list = ref([
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
  {
    id: "1381564859065643008",
    cateName: "手机",
    image:
      "https://liangpiao-image-1323418546.cos.ap-shanghai.myqcloud.com/commerce_qualifications/1715213770677856965/2025-06-09/1d6c01681e494de6bbe2356e84d7cf3a.png",
    title:
      "【顺丰速发】Apple/苹果 iPhone 16 Pro 新款5G手机国行全新官方正品旗舰店优惠直降",
    originalPrice: 689900,
  },
]);
const val = ref("");
const value = ref(0);
let tabs = [
  {
    id: 0,
    name: "全部",
  },
  {
    id: 1,
    name: "手机数码",
  },
  {
    id: 2,
    name: "家具用品",
  },
  {
    id: 3,
    name: "衣服",
  },
  {
    id: 4,
    name: "化妆品",
  },
  {
    id: 5,
    name: "家具",
  },
];
const leftList = computed(() => {
  return list.value.slice(0, Math.ceil(list.value.length / 2));
});
const rightList = computed(() => {
  return list.value.slice(Math.ceil(list.value.length / 2));
});
</script>

<style lang="scss">
.index-container {
  display: flex;
  flex-direction: column;
  height: 100%;

  .list-container-test {
    display: flex;
    gap: 15px;
    padding: 20px 15px;
    .setsion {
      // background-color: #ccc;
      display: flex;
      flex-direction: column;
      gap: 15px;
      flex: 1;
      .item {
        background: #eee;
        height: 500px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }

    .setsion1 .item:nth-child(2n) {
      // gap: 30px;
      height: 500px;
      /* 左列间距较小 */
    }

    .setsion2 .item:nth-child(2n+1) {
      // gap: 50px;
      /* 右列间距较大 */
      height: 600px;
    }

  }

  .header {
    height: 200px;
  }

  .list-container {
    flex: 1;
    overflow-y: auto; // 允许列表容器滚动
    padding: 20px;
    box-sizing: border-box; // 确保padding不影响总高度

    .list {
      // padding: 20px;
      display: flex;
      flex: 1;
      overflow-y: auto;

      .left-setsion {
        display: flex;
        flex-direction: column;
        flex: 1;
      }

      .right-setsion {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 20px;
      }

      .left-setsion,
      .right-setsion {
        .item {
          height: 450px;
          background-color: #eee;
          border-radius: 5px;

          &:nth-child(n + 2) {
            margin-top: 15px;
          }
        }
      }
    }
  }
}

.nut-tabs__content {
  display: none !important;
}

.nut-tabs__list {
  background-color: #fff !important;
}
</style>
